/*
 * @Author: yangrongxin
 * @Date: 2021-08-13 09:17:06
 * @LastEditors: liubin
 * @LastEditTime: 2021-10-20 10:17:10
 */
import { View, Text, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui';
import dayjs from 'dayjs';
import { payFn } from '@/components/PayFn';
import { TEST_STATUS, CHANNEL_TYPE, CHANNEL_TYPE_VALUE_ENUM, REPORT_STATUS, PAY_TYPE } from '../../dataDictionary';
import styles from './index.module.less';

interface IListItemProps {
  orderId: string; // 订单id
  measureTableRecordId: string; // 量表记录id
  measureTableId: string; // 量表id
  status: TEST_STATUS | PAY_TYPE; // 测评状态
  name: string; // 测评名称
  headImg: string; // 首图
  XCreaateTime: string; // 创建时间
  reportStatus: REPORT_STATUS; // 记录当前的报告状态 已经完成或者进行中
  isOrderList?: boolean; // 当前是不是订单列表
  evaluationId: string; // 当前测评的id
  evaluationType: CHANNEL_TYPE; // 当前测评的类型
  [props: string]: any; // 扩展的item属性
}

const ListItem = (props: IListItemProps) => {
  const {
    measureTableRecordId,
    measureTableId,
    evaluationId,
    evaluationType,
    status,
    name,
    beginTime,
    endTime,
    // headImg,
    xCreateTime,
    reportStatus = REPORT_STATUS.CREATED,
    isOrderList, // 判断当前是不是订单 待支付的界面
    orderId,
    successNums = 0, // 已完成测评数量
    totalNums = 0, // 测评的总数量
  } = props;

  // 获取当前按钮的描述以及样式
  const getDesc = () => {
    let btnClassName: string = ''; // 按钮的className
    let btnText: string | any = ''; // 按钮的显示文本
    let teamExtend: any = null; // 控制当前团队展示的文本
    switch (status) {
      case TEST_STATUS.WAITTEST:
        btnClassName = styles.waitTest;
        btnText = '去测评';
        teamExtend = (
          <View className={styles.teamExtend} onClick={handleOnClick}>
            <Text>已测评</Text>
            <Text className={styles.uninText}>{successNums}</Text>
            <Text>/</Text>
            <Text>{totalNums}</Text>
            <AtIcon value="chevron-right" size="20" />
          </View>
        );
        break;
      case TEST_STATUS.FINISH:
      case PAY_TYPE.WAITPAY:
        if (isOrderList) {
          btnClassName = styles.waitPay;
          btnText = '去支付';
        } else {
          btnClassName = `${styles.finish} ${reportStatus === REPORT_STATUS.CREATED ? '' : styles.viewReportIng}`;
          btnText =
            reportStatus === REPORT_STATUS.CREATED ? (
              <View className={styles.viewReport}>
                <AtIcon prefixClass="icon" value="Post-fill" size="14" />
                <Text>查看报告</Text>
              </View>
            ) : (
              <View className={styles.viewReport}>
                <Text>报告生成中</Text>
              </View>
            );
          teamExtend = (
            <View className={styles.teamExtend} onClick={handleOnClick}>
              <Text>已完成</Text>
              <AtIcon value="chevron-right" />
            </View>
          );
        }
        break;
      case TEST_STATUS.OUTOFDATE:
        btnClassName = styles.outOfDate;
        btnText = '已过期';
        teamExtend = (
          <View className={styles.teamExtend} onClick={handleOnClick}>
            <Text>已过期</Text>
            <AtIcon value="chevron-right" />
          </View>
        );
        break;
      // 追加的已取消状态
      case TEST_STATUS.CANCEL:
        btnClassName = styles.outOfDate;
        btnText = '已取消';
        break;
      default:
        break;
    }

    return {
      btnClassName,
      btnText,
      teamExtend,
    };
  };

  // 点击状态进行跳转
  const handleOnClick = () => {
    // 跳转到评测开始界面进行评测
    if (evaluationType === CHANNEL_TYPE.TEAM) {
      Taro.navigateTo({
        url: `/pages/Team/components/EvaluationTable/index?isCondition=false&evaluationId=${evaluationId}&status=${status}`,
      });
      return;
    }
    // 跳转到测评页面开始进行测评
    if (status === TEST_STATUS.WAITTEST) {
      Taro.navigateTo({
        url: `/EvaluationModule/pages/CheckboxAnwser/index?measureTableId=${measureTableId}&title=${name}&measureTableRecordId=${measureTableRecordId}&evaluationId=${evaluationId}&evaluationType=${evaluationType}`,
      });
    } else if (status === PAY_TYPE.WAITPAY && isOrderList) {
      // 直接调用支付接口 进行微信支付
      payFn(orderId, name, measureTableId);
    } else if (status === PAY_TYPE.WAITPAY && !isOrderList && reportStatus === REPORT_STATUS.CREATED) {
      Taro.navigateTo({
        url: `/pages/TestReport/index?measureTableRecordId=${measureTableRecordId}`,
      });
    } else {
      Taro.showToast({
        title: '敬请期待',
        icon: 'none',
      });
    }
  };

  const { btnClassName, btnText, teamExtend } = getDesc();

  return (
    <View className={styles.container} onClick={handleOnClick}>
      {/* 左侧的测评信息展示 */}
      <View className={styles.testInfo}>
        {/* 名称以及属于个人还是团队 */}
        <View>
          <Text>{name || '暂无测评名称'}</Text>
          <View>
            <Text>{CHANNEL_TYPE_VALUE_ENUM[evaluationType]}</Text>
          </View>
        </View>
        {evaluationType === 2 ? <Text>{`${beginTime} ~ ${endTime}`}</Text> : <Text>{dayjs(xCreateTime).format('MM月DD日')}</Text>}

      </View>
      {/* 右侧的控制按钮 */}
      {evaluationType === CHANNEL_TYPE.TEAM ? teamExtend : <Button className={btnClassName}>{btnText}</Button>}
    </View>
  );
};

export default ListItem;
